<!DOCTYPE html>
<html>

<head>
    <title>终端查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="./css/colorpicker.css">
    <link rel="stylesheet" href="./css/datepicker2.css">
    <link rel="stylesheet" href="./css/uniform.css">
    <link rel="stylesheet" href="./css/select2.css">
    <link rel="stylesheet" href="./css/main2.css">
    <link rel="stylesheet" href="./css/grey.css">
    <link rel="stylesheet" href="css/scheme.css">
    <link rel="stylesheet" href="css/page3.css">
</head>

<body>
    <div class="container-fluid" id="infoSearch">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title">
                        <span class="icon">
                            <i class="icon-file"></i>
                        </span>
                        <h5>终端查询</h5>
                    </div>
                    <div class="widget-content">
                            <div class="form-inline">
                                <label><input type="text" class="input-medium seller-name" placeholder="经销商名称"></label>
                                <label><input type="text" class="input-medium seller-city" placeholder="所属城市"></label>
                                <label><input type="text" class="input-medium client-name" placeholder="终端名称"></label>
                                <label>&nbsp;照片上传时间段:</label>
                                <span class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control pic-time-start" name="start" />
                                    <span class="input-group-addon">-</span>
                                    <input type="text" class="input-sm form-control pic-time-end" name="end" />
                                </span>
                                <button class="btn btn-primary info-search-btn" type="button"><i class="icon-search icon-white"></i> 查询</button>
                            </div>
                    </div>
                </div>
                <div class="widget-box result-box hide fade">
                    <div class="widget-title">
                        <span class="icon">
                            <i class="icon-camera"></i>
                        </span>
                        <h5>查询结果</h5>
                    </div>
                    <div class="widget-content">
                        <div class="row-fluid">
                          <div class="span12">
                              <table class="table text-center table-bordered table-striped table-hover info-list-table">
                                  <!-- <thead>
                                      <tr>
                                          <th>经销商名称</th>
                                          <th>分销商终端名称</th>
                                          <th>所属城市</th>
                                          <th>联系人</th>
                                          <th>联系电话</th>
                                          <th>手机</th>
                                          <th>地址</th>
                                          <th>类型</th>
                                          <th>类别1</th>
                                          <th>类别2</th>
                                          <th>操作</th> 
                                      </tr>
                                  </thead>
                                  <tbody>
                                  <tr>
                                      <td>汕头市澄海区华宇酒类贸易商行</td>
                                      <td>国窖专卖店</td>
                                      <td>南充市</td>
                                      <td>何光</td>
                                      <td>2923666</td>
                                      <td>13012341234</td>
                                      <td>西河路</td>
                                      <td>分销商</td>
                                      <td>二级分销商</td>
                                      <td>A</td>
                                      <td><button type="button" class="btn btn-small btn-danger">删除</button></td>
                                  </tr>
                                  </tbody> -->
                              </table>
                          </div>
                        </div>
                        <div class="row-fluid">
                          <div class="span12">
                            <p class="text-center page-statis">第0页 共0页</p>
                            <ul class="pager" style="margin:0;">
                              <li><a href="#" class="page-info-table prev">上一页</a></li>
                              <li><a href="#" class="page-info-table next">下一页</a></li>
                            </ul>
                            
                          </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">
                                <ul class="nav nav-tabs scheme-tab">
                                    <li class="active">
                                        <a href="#">门头店招</a>
                                    </li>
                                    <li><a href="#">陈列情况</a>
                                    </li>
                                    <li><a href="#">促销活动</a>
                                    </li>
                                    <li><a href="#">竞品情况</a>
                                    </li>
                                    <li><a href="#">库存情况</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <ul class="thumbnails pic-list">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">

            </div>
        </div>
    </div>
    <!-- modal  -->
    <div class="loading" id="dataLoading"></div>
    <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-body">
        <div class="pic">
          <img  alt="图片预览">
          <a class="icon-share-alt turn-left" data-action="turnLeft"></a>
          <a class="icon-share-alt turn-right" data-action="turnRight"></a>
          <a class="icon-chevron-left prev" data-action="prev"></a>
          <a class="icon-chevron-right next" data-action="next"></a>
          <a class="icon-remove" data-dismiss="modal" data-action="close"></a>
        </div>
      </div>
    </div>
    <!-- modal  -->
    <a href="#cityListModal" data-toggle="modal" class="hide fade" id="city-list-btn">显示城市列表</a>
    <div class="modal hide fade" id="cityListModal" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-body">
          <div class="city-box">
            <h3 class="text-center">选取城市</h3>
            <ul id="city-list">
            </ul>
          </div>
          <div class="city-confirm-btn text-right">
            <span class="btn btn-primary" id="confirm-city" data-dismiss="modal" data-action="close">确定</span>
          </div>
          <a class="icon-remove" data-dismiss="modal" data-action="close"></a>
      </div>
    </div>    
    <style>
      #myModal .modal-body .pic{
        text-align: center;
        margin: 0 auto;
      }
      #table-tmp{
        margin:20px;
        border-bottom: none;
      }
      #table-tmp .table{
        border: 1px solid #ddd;
        border-width: 1px 1px 1px 0;
      }
    </style>
    <!-- picListTmpl -->
    <script type="text/template" id="picListTmpl">
        {%_.each(ClientPictures,function(item, index){%}
            {% var csName = (initIndex+index)%4==0 ? ' nomarginLeft' : ''%}
            <li class="span3{{csName}}">
                <div class="thumbnail" data-id="{{item.ClientPictureID}}">
                    {% if (item.PictureType != 3){%}
                      <a href="#myModal" data-id="{{item.ClientPictureID}}" data-toggle="modal" data-keyboard="true">
                          <img alt=""  src="{{item.PictureAddress}}" onerror="this.src='img/loading.png'">
                      </a>
                    {%}%}
                    <div class="caption">
                        <p><span>备注：</span>{{item.Remark}}</p>
                        {% if (item.PictureType == 4){%}
                          <p><span>进货数量：</span>{{item.Purchase}}</p>
                          <p><span>出货数量：</span>{{item.Shipments}}</p>
                          <p><span>剩余库存：</span>{{item.RemainingQuantity}}</p>
                        {%}%}
                        {% if (item.PictureType != 4){%}
                          <p title="{{item.RealAddress}}" class="text-overflow"><span>所在位置：</span>{{item.RealAddress}}</p>
                        {%}%}
                        <p><span>上传时间：</span>{{item.UploadDate}}</p>
                        <p><span class="btn btn-warning rm-pic" data-id="{{item.ClientPictureID}}">删除照片</span></p>
                    </div>
                </div>
            </li>
        {%});%}
    </script>

   <!-- infoListTableTmpl -->
   <script type="text/template" id="infoListTableTmpl">
       <thead>
           <tr>
               <th>经销商名称</th>
               <th>分销商终端名称</th>
               <th>所属城市</th>
               <th>联系人</th>
               <th>联系电话</th>
               <th>手机</th>
               <th>地址</th>
               <th>类型</th>
               <th>类别1</th>
               <th>类别2</th>
               <th>操作</th> 
           </tr>
       </thead>
       <tbody>
       {%_.each(ImportClients, function(item){%}
         <tr>
             <td>{{item.SalesCompanyName}}</td>
             <td><span class="view-pic-btn" data-id="{{item.ClientMaterialID}}">{{item.ClientName}}</span></td>
             <td>{{item.CityName}}</td>
             <td>{{item.Linkman}}</td>
             <td>{{item.Telephone}}</td>
             <td>{{item.Mobile}}</td>
             <td>{{item.Address}}</td>
             <td>{{item.CustomerType}}</td>
             <td>{{item.CustomerType1}}</td>
             <td>{{item.CustomerType2}}</td>
             <td><button type="button" class="btn btn-small btn-danger rm-info-btn" data-id="{{item.ClientMaterialID}}">删除</button></td>
         </tr>
        {%})%}
       </tbody>
   </script>
  
    <!-- city-list -->
    <script type="text/template" id="cityListTmpl">
      {%_.each(UserOperationCities, function(item){%}
        <li>
          <label><input type="checkbox" value="{{item.CityID}}">{{item.CityName}}</label>
        </li>
       {%})%}
    </script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.ui.custom.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-colorpicker.js"></script>
    <!-- // <script src="./js/bootstrap-datepicker.js"></script> -->
    <script src="./js/jquery.uniform.js"></script>
    <!-- // <script src="js/select2.min.js"></script> -->
    <script src="js/unicorn.js"></script>
    <script src="js/unicorn.form_common.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/page3.js"></script>
    <script src="js/bootstrap-datepicker2.js"></script>
    <script src="js/bootstrap-datepicker.zh-CN.js"></script>
</body>

</html>